It is an easy to use QR code generator that offers other QR-related services including:
QR codes are a type of barcode that first became popular around 2010, but over the Covid-19 pandemic, the need to share information digitally massively increased. QR codes can link websites, share data, and even take payments. Even though these codes are integrated into everyday life, very few people know how they actually work. This is mostly because they are meant to make life easier so are designed to be as easy to use as possible with no barriers to entry. There is a tool that breaks down the steps of mathematical integration that I have found immensely helpful, and see value in creating a similar tool for QR code generation.
Most previous tools to create QR codes work like a magic black box, where the user inputs the data and a QR code is produced, abstracting all the complex yet beautiful inner workings of the algorithm.
For developers, there are modules to create QR codes pre-built into all the popular coding languages, so there is no specific reason to learn. I want to create an intuitive QR code maker that anyone can use and understand what goes on behind the scenes.
Existing tools are designed to be functional and aesthetic, as this is what the majority of consumers are looking for, but this project hopes to spark users’ interest in the technology of everyday life. If more people understand what’s going on behind the scenes, there is more chance someone sees a potential improvement that could push society forward.
Computational methods are especially well suited to this problem because of the nature of QR code generation. Manually calculating QR code data and placing patterns is too time consuming for most users. It also requires an understanding of error correction algorithms and binary encoding. Another issue of manual calculation is if the user makes any errors the QR code may not read correctly.
This tool wants to educate, so the whole process should be available for the user to see. However, at first only the necessary information, such as encoding text into binary need to be explained, while abstracting more complex processes like error correction or grid population for exploring if the user wants to dig deeper.
This project lends itself well to being split up into different procedures:
Breaking the problem into these discrete elements allows each step to be solved and tested separately, which is key to making sure everything works smoothly.
Once the user has created the QR code, they should be able to save either the final code (which makes the tool functional for real-world application) or the step-by-step process (to allow them to revisit their learning later and share their newfound knowledge). There could also be options to store the QR codes on a server so the user can revisits them across multiple devices
Working in binary by hand is tedious, and QR codes are made up of 1s and 0s, in this case black and white squares. The different versions of QR codes can be chosen automatically or with guidance of the user.
Members of the general public who love to learn about technology and enhance their digital literacy in their spare time.
They will use the tool to learn how QR codes work, as well as potentially creating personalised codes for personal or small business use. The educational aspect will help them understand how QR codes and binary encoding work while the practical aspect allows them to create codes for their needs.
By offering an accessible way to learn about the technology we all use. The tool will use a visually appealing interface to make it engaging and not overwhelm less technical users.
Software Developers or Programmers that are interested in integrating QR code technology into their projects, but are resistant to using 3rd party code so need to understand.
Developers will be able to explore the technical aspects of QR codes, such as binary encoding, error correction, and grid placement. The tool’s breakdown of the process will allow developers to create QR codes that integrate perfectly with the applications they are creating.
The tool provides a detailed explanation of the steps involved in creating a QR code, which are typically hidden by “Black Box” tools. This can save precious development time, as developers won’t need to read technical documentation.
Students aged 14–18 studying computer science or related subjects. They may have varying levels of digital expertise but should all have a curiosity about how everyday technologies like QR codes work.
Students can use the tool to create and learn about QR codes interactively, both in class and in private study. Students can input custom data, and explore how their input visually changes the QR code.
Shows students the value of breaking down the problem into Its different elements (decomposition). Covers key topics like binary encoding, so can act as a revision tool. Encourages student’s curiosity about the subject by providing immediate feedback and making abstract concepts tangible.
To fit the desired stakeholders, I found five people from across that fitted my stakeholder groups and were willing to invest their time into the project.
| Jamie Gupta | Developer |
|---|---|
| Benjamin Dalton | Computer Science Student |
| Miguel Velho Duarte | Computer Science Student |
| Callum Donoghue | Hobbyist |
| Andy Nowosinski | Developer |
I will split this into two different parts, the QR code creation and the QR code explanations as these are two distinct categories.
This is a lightweight QR code generator that offers some basic functionality. This website stores the data in the actual QR code by default, this is good as they are completely self contained, but they can get very complex when storing a lot of data. This is the type of QR code I want to create.
It is an easy to use QR code generator that offers other QR-related services including:
There is also information about what a QR code is and the history of the QR code along with a set of frequently asked questions to make the page more engaging.
This service is aimed at businesses as it allows specific B2B solutions and makes it easy for businesses to integrate QR codes into their marketing and workflow.
This is a QR code maker that walks you through the process of making a very custom QR code. This website only creates QR codes that link to their own website, and then redirect to your content. This is good as you can change the content of the QR code once you have created it and you can fit as much information as you want in a simple-looking QR code. However, this means you are relying on a 3rd party to keep your QR codes online.
Note this doesn’t have an option to only hold text, which to me seems like a major drawback of this particular solution.
This tool allows you to set a password, which is not possible with immediate QR codes.
This tool encourages you to give up your email and create an account to access most of the content.
This is not a feature I want in my application as it would be a barrier for people to learn.
This is a private blog about decoding someones tattoo of a QR code, talking though the process, and collating various good resources to help. This kind of explanation is what I want to create, but customised for the users input.
This graphic shows the parts of a version 1 QR code that are the same now matter what data the code contains
This graphic shows the order that the binary data on the QR code is places
This graphic provides a reference for the mask that covers the data on a QR code, seemingly just to make it harder to encode/decode.
In order to collect more data about people's view of QR Codes.
These are the questions I asked:
Have you seen a QR Code in the past week?
Have you used a QR Code in the past week?
Do you understand how QR Codes work?
How do you feel about QR Codes?
After surveying ~50 people, I created these graphs:
| “I love how they make payments quicker, but I don’t like using them for menus.” |
|---|
| “They feel like a futuristic concept, but I don’t really understand how they work.” |
| “I’ve heard about scams involving QR codes, so I’m always cautious before scanning.” |
| “Great for event check-ins, but annoying when used instead of proper instructions.” |
| “Some QR codes take me to websites that don’t even work, which is frustrating.” |
| “I miss paper menus. QR code menus are inconvenient, especially for older people.” |
| “They seem like magic, but I wish more people explained how they actually work.” |
| “It’s nice when they’re optional, but annoying when they’re the only option.” |
| “I use them for logging into my laptop at work—super convenient.” |
| “They look complicated, but I just scan them without thinking about it.” |
| “I avoid them because I don’t like taking my phone out all the time.” |
| “They’re everywhere now. Some businesses rely on them too much.” |
These responses generally convey that people are very aware of how ingrained QR Codes have become into society, but must see them as some magic technology.
To get a better idea of what my stakeholders would want from this tool, I will interview clients from my different stakeholder groups to get a sense of how I can make the tool most useful to them.
I want the questions to cover the whole process of how the tool will work so have split it up into 5 sections based on different aspects of the tool.
And also ask for any extra comments the clients have.
Most people don’t have any particular tool they use regularly, and this is causing issues of inconsistency and not all tools offering the same services. These tools are mostly about making money so they are keen to push their subscription services and advertise on their site.
The most needed feature from most of my clients is the instant generation of QR codes and ease of download, but also options to colour the QR Code. To solve both problems I will add one button to instant download the QR code and one button to download customised.
The Input formats I will design the UI around are Text (and by extension links as they are the same format) and only add others later. This would only be a UI change, as even complex QR codes like wifi connections are just string standards.
The output formats I will integrate into the app are: .PNG and .JPG for maximum compatibility with devices, with .PNG as the default; .GIF for the reduced file size due to reduced colour range; .SVG for systems that work better with vector graphics and .TXT for use in command line interface only systems such as many Linux programs.
Here are the UIs my clients liked:
These UIs all:
The only effective way to make the app compatible with all the devices my clients mentioned is to make the app web based. This means a single server has to run it then it can by accessed on any device. To make sure it works well on all devices I will test it on all different aspect ratios and screen pixel widths.
I had planned to require the tool to be run through the terminal, but clients general lack of confidence with using the CLI means I shall have to make the tool accessible without the terminal and/or give detailed guides for installation.
Takes the user’s input and formats it correctly to pass to the program.
Input needs to be taken for the tool to function, and validating this ensures the data is not misunderstood by the generator. Supporting multiple formats means the tool is more versatile and useful for a variety of users.
Processes the input to create a QR code quickly and in a format compatible with modern QR code readers.
Fast generation ensures a smooth user experience by reducing wait times. Compatibility with at least 10 modern QR code readers guarantees usability across various devices and applications, meeting the client's priorities for reliability and speed.
Displays the generated QR code on the webpage and provides options for downloading in different formats and styles.
Customizable output options allow flexibility in file type and appearance. Quick downloads improve usability, while explanatory documents with watermarked branding provide educational value to users and promote the tool.
Presents an intuitive, visually clear interface that guides users through the QR code creation process step-by-step.
A well-designed interface ensures accessibility and reduces user errors, making the tool approachable for both technical and non-technical users. Step-by-step guidance and highlights improve usability and user satisfaction.
Offers offline and online modes based on the user’s access method, balancing security and convenience.
Offline mode improves security and reduces bandwidth usage, which is critical for privacy-conscious users. Online mode enhances compatibility and convenience by allowing access across devices while supporting features like account login and history saving.
Manages user accounts for online access, storing login credentials and user history securely.
A secure account system builds trust by safeguarding user data with strong encryption. Storing history enhances functionality, allowing users to retrieve previously generated QR codes easily. This system ensures both security and convenience for remote users.
1.1 The user must be able to select what format of QR Code they want to use, with options of plaintext, link, wifi connection and contact card . The default should be a link [as this is my clients most used option]
1.2 If the user chooses plain text or a link they must be able to plain text input text up to 300 characters [This is easily enough to satisfy my clients needs]. These need to be validated to make sure only ASCII characters.
1.3 If the user choosesWifi Connection, they need to be able to input the SSID, encryption type, and password. The encryption type should be a drop down menu
1.4 If the user chooses contact card, the Vcard standard should be used. There should be options to input: Title, Firstname, Surname, phone number, email, address, website, company and role
1.5 All fields must validate the user's input to make sure only ASCII characters are included, support for other character sets may be added in later updates.
1.6 The tool must allow users to select the level of error correction, give a recommended level, and show the user the effects different levels give.
2.1 The tool must generate QR codes in less than 1 second and the whole page in less than 5 seconds, the page should populate as it generates to give the user the impression of instant loading. [Instant loading was a key priority of my clients]
2.2 If the user has input non plaintext or link data, it must convert it into the standard format.
2.3 QR codes must be scannable by all modern QR code reader apps (with at least 10 tested).
3.1 The tool will open up and display the output on the web page.
3.2 There should be a template that has certain variables that can be updated by the server.
3.3 There should be a quick download button that downloads a black and white QR code as a PNG.
3.4 There should be a Advanced Download button underneath the quick download that opens up a dialogue box with colour file type and colour options.
3.5 Users must be able to download the whole explanation document this will download as a pdf with a watermark at the bottom to advertise the tool.
4.1 The tool must make it clear what is required of the user by highlighting input boxes.
4.2 The tool must explain each step of the QR code creation, with detailed explanations.
4.3 The tool should have an intuitive interface that guides the user through the generation process in a logical way.
5.1 On accessing the tool, it should detect if the user is accessing it from the same computer (localhost) or from a different computer (local or public IP). [This allows it to be used as an offline tool which increases security and bandwidth requirements, but also accessed through any internet connected device to maximise compatibility]
5.2 If accessed through localhost, the tool will be loaded in offline mode, not requiring a login and saving the QR Code history on their local device.
5.3 If accessed any other way, the tool will be loaded in online mode, this will prompt the user to login to save their history; this will then be stored in a database on the server that is hosting the website.
6.1 If the user is accessing the program remotely, there will be a login system that saves the users data.
6.2 To create an account the user will be prompted to enter an email and password.
6.3 The email will be format checked with regex.
6.4 The password will be checked that it is more than 8 characters long.
6.5 The password will be hashed using the SHA-256 Algorithm at the users browser then again at the server for maximum security
6.6 The accounts will be stored in an SQLite server along with entries for the users history of previously Generated QR codes.
###
| Category | Requirement | Minimum Specification | Justification |
|---|---|---|---|
| Programming Language | Python | Python 3.12 or higher | This is the latest well-established version of python. |
| Libraries | Required libraries: flask, jinja2, numpy, reedsolo, SQLite | Latest releases (can be auto-installed during runtime) | Flask to set up the web server, jinja2 to add Python data onto an HTML page, numpy to hold the QR code while it is being built and reedsolo for the error correction |
| Operating System | Windows/Linux/MacOS | Any version with Python 3.12 support | To run the program. If the code is run on a CLI-only OS, then the web page can be accessed by any device connected to the same network. |
| Storage | 200 MB for the program and output files | SSD or HDD | Small storage space needed for application files, libraries, and generated QR codes. |
| Input Devices | Keyboard and Mouse | Standard | For data entry and navigation. |
| Output Devices | Monitor Printer (optional) | 1080p minimum | To make sure small text is readable. If users want to print QR codes, a standard printer is sufficient. |
| Category | Tool | Reason |
|---|---|---|
| IDE | VS Code | VS code is a very customisable integrated development environment, with plugin support and a large plugin library of features the public has created |
| PC | 2021 Apple iMac | To run the IDE, and provide an operating system to connect peripherals such as |
While this tool aims to demystify the QR code generation process for my stakeholders, certain limitations are inevitable with the technology available and staying within the scope.
The tool will only take ASCII characters as input. This excludes those who write with other character sets. By their nature, QR codes cannot encode most character sets, including but not limited to Chinese, Arabic or Cyrillic. In this project I have also chosen to exclude Kanji for simplicity.
Generating QR codes at the speeds required will be easily possible most of the time. However as they will be calculated on the server, If many people are accessing the tool at once, a bottleneck may be reached.
Although PNG, JPEG, GIF, SVG and TXT cover a wide range of use cases, advanced users may need them in other formats such as PSD or PDF. This adds an extra step to their workflow, giving them a reason not to use the tool.
The tool aims to educate users on QR code generation, but a big part of this is the error correction, which will be abstracted. This will limit its appeal to highly technical users looking to get into the depths of how these systems work. I have chosen to abstract this as error correction is a broad topic, and not specifically related to QR codes.
Although steps will be taken to ensure the tool is accessible, such as dark mode and easily readable fonts, users with specific needs such as screen readers or high-contrast visuals may encounter challenges if the tool is not set up in a way in which these tools understand.
The tool will be web based and tested on a number of screen sizes. Different browsers sometimes interpret HTML and its styling differently, making the tool hard to use. Older devices may also encounter this problem
As the tool is web based, clients must have an internet connection to access it. This may exclude users in areas of poor connectivity or those who prefer offline tools.
The server’s backend will only be accessible via the LAN, to prevent external connections, port 80 will need to be open for the tool to be accessible. This brings up some security concerns, but these are minimal as it is a small scale application that won’t store any sensitive data.
For each of the clients I interviewed, I scheduled a meeting with them and went through the requirements that I had set out in this section. They were all happy, so I got them to sign a slip formalising this.
